<!--科技学分提交-->
<template xmlns:v-bind="http://www.w3.org/1999/xhtml">
  <div id="scienceCommit">
    <form class="form-horizontal">
      <div class="form-group">
        <label  class="col-sm-2 control-label">学号</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" v-model = 'studentNo'>
        </div>
      </div>
      <div class="form-group">
        <label  class="col-sm-2 control-label">姓名</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" v-model='studentName'>
        </div>
      </div>
      <div class="form-group">
        <label  class="col-sm-2 control-label">所选项目</label>
        <div class="col-sm-10">
          <select class="col-sm-12"  v-model="drId" style="width: 100%">
            <option v-bind:value="d.id" v-for="d in dev">{{d.content}}</option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <label  class="col-sm-2 control-label">申请内容</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" v-model = 'content'>
        </div>
      </div>
      <div class="form-group">
        <label  class="col-sm-2 control-label">申请分数</label>
        <div class="col-sm-10">
          <input type="number" class="form-control" v-model= 'num' placeholder="只填数字有效">
        </div>
      </div>
      <div class="form-group">
        <label  class="col-sm-2 control-label">选择文件</label>
        <div class="col-sm-10">
          <div class='finish_room'>
            <div class='finish_room2'>
              <div v-for='(item ,index ) in imgs' class='room_img'>
                <img :src="item">
                <span @click='delete_img(index)'><img src="../assets/imgs/delete.png"></span>
              </div>

              <div class='room_add_img'  v-show="imgs == '' ">
                <span><img src="../assets/imgs/add_img.png"></span>
                <span>上传图片</span>
                <input @change='add_img'  type="file">
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="button" class="btn btn-default" @click="commit()"
            ref="btn">提交申请</button>
        </div>
      </div>
    </form>
  </div>
</template>


<script>
  /*
   *
   *
   *
   * */
  import API from '../config/request';
  import {decodeData} from '../config/base64'

  export default {
    name : 'scienceCommit',
    data () {
      return {
        url: API.URL,
        dev:'',
        drId : 1,
        studentName: '',
        studentNo: '',
        content: '',
        num : '',
        file: '',
        imgs:[],
        reader:null,
        classId: ''
      }
    },
    created() {
      this.studentNo = decodeData(localStorage.getItem('studentNo'))
      this.getScience()
      this.classId = decodeData(localStorage.getItem('classId'))
    },
    methods : {
      getScience: function () {
        this.$http.get(this.url+'common/getDevNum').then(function (response) {
          this.dev = response.body
        })
      },
      delete_img: function(item){
        this.imgs.splice(item,1);
      },
      add_img: function(event){
        this.reader = new FileReader();
        let reader = this.reader;
        var img1=event.target.files[0];
        reader.readAsDataURL(img1);
        var that=this;
        reader.onloadend=function(){
          that.imgs.push(reader.result)
        }
      },
      commit: function () {
        let self = this;
        if(this.imgs[0] == null){
          alert("请选择图片")
        }else{
          self.$refs.btn.innerHTML = "请稍等。。。";
        }
        let picFormat = this.imgs[0].toString().split("image/")[1].split(";")[0]
        let picContent = this.imgs[0].toString().split("image/")[1].split(";")[1].split(",")[1]
        let data = {
          'drId': this.drId,
          'studentName': this.studentName,
          'studentNo': this.studentNo,
          'classId' : this.classId,
          'content': this.content,
          'num': this.num,
          'reader': picContent,
          'suffix': picFormat
        }
        setTimeout(function () {
          self.$http.post(self.url+'development/create',data,
            {emulateJSON: true}
          ).then(function (response) {
            alert("上传成功")
            self.$router.push({path: '/grade/'+ self.studentNo})
          },function(response){
            alert("链接服务器失败,请换小一点的图片试试")
          })
        },3000)
/*
*
* 可能会存在图片过大的问题
*
*
*
* */

      }
    }

  }

</script>

<style scoped>
  @import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
  @import "../assets/font-awesome-4.1.0/css/font-awesome.min.css";

  .finish_room{
    width: 430px;
    height: auto;
  }

  .finish_room2{
    width: 100%;
    height: auto;
    padding-top: 15px;
    padding-bottom: 15px;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #e1e1e1;
  }

  .finish_room2 .room_img{
    width: 150px;
    height: 100px;
    margin-right: 10px;
    position: relative;
    overflow: hidden;
  }
  .finish_room2 .room_img img{

    width: 100%;
    height: 100%;
  }
  .finish_room2>.room_img span{
    position: absolute;
    width: auto;
    height: auto;
    right: 5px;
    bottom:3px;
  }



  .room_add_img{
    width: 148px;
    height: 98px;
    border:1px solid #e1e1e1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
  }
  .room_add_img >span:nth-child(1){
    margin-top: 20px;
    width: 40px;
    height: 40px;
    overflow: hidden;
  }
  .room_add_img >span:nth-child(2){
    margin-bottom: 10px;
  }

  .room_add_img input{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 99999;
    opacity: 0;
  }

</style>
